<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="jquery-1.11.0.js"></script>
</head>
<style>
   .zz{
       background: #000;
   }
    .zz li{
        float: left;
        padding:0 20px;
    }
</style>
<body>
<input type="text">
<ul class="zz">
    <li style="width: 200px; height: 20px; background: #f66"></li>
    <li style="width: 100px; height: 20px; background: #0f0"></li>
    <li style="width: 200px; height: 20px; background: #f66"></li>
    <li style="width: 100px; height: 20px; background: #0f0"></li>
    <li style="width: 240px; height: 20px; background: #f66"></li>
</ul>
<script>
    $(function () {
        var sum = 0;
        $('.zz').find('li').each(function () {
            sum+=parseInt($(this).css('width'))+parseInt($(this).css('paddingLeft'))+parseInt($(this).css('paddingRight'))
        })
        console.log(sum)
        $('body').on('click',function(){
        	alert()
        })
    })

</script>

</body>
</html>